<!--
 * @Author: Li Zengkun
 * @Date: 2022-09-12 22:04:40
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-09-16 22:17:21
 * @Description: 
-->
<template>
  <div class="content">
    <el-card shadow="hover">
      <template #header> 文章列表 </template>
      <el-table
        stripe
        highlight-current-row
        :height="550"
        :data="list"
        style="width: 100%"
        @row-click="handleDetail"
      >
        <el-table-column prop="id" label="id" width="80" />
        <el-table-column prop="cate_1st_name" label="一级分类" width="80" />
        <el-table-column prop="cate_2nd_name" label="二级分类" width="80" />
        <el-table-column label="封面" width="100">
          <template #default="scope">
            <el-image
              class="avatar"
              style="height: 70px; width: 70px"
              hide-on-click-modal="true"
              :initial-index="scope.$index"
              :src="scope.row.main_photo"
              fit="cover"
              :preview-src-list="imgList"
              preview-teleported="true"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" width="230" />
        <el-table-column label="标签" width="120">
          <template #default="scope">
            <el-tag v-for="item in scope.row.tags" :key="item.id">
              {{ item.name }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          sortable
          prop="create_time"
          label="发布日期"
          width="180"
        />
        <el-table-column
          sortable
          prop="update_time"
          label="更新日期"
          width="180"
        />
        <el-table-column fixed="right" label="操作" width="290">
          <template #default="scope">
            <el-button
              @click.stop="handleRemove(scope.row.id, scope.$index)"
              type="danger"
              icon="Delete"
              >删除</el-button
            >
            <el-button
              @click.stop="handleEdit(scope.row)"
              type="primary"
              icon="Edit"
              >编辑</el-button
            >
            <el-button
              @click.stop="handleDetail(scope.row)"
              type="success"
              icon="CollectionTag"
              >标记</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from "vue";
import { article } from "@/api";
import { useRouter } from "vue-router";

const router = useRouter();

// 文章列表
let list = ref(
  await article.list({ pageindex: 1, pagesize: 30 }).then((res) => {
    return res.data;
  })
);

// 图片预览列表（计算属性）
let imgList = computed(() => {
  return list.value.map((item) => item.main_photo);
});

/**
 * @description: 删除文章
 * @return {*}
 * @param {*} id 要删除的文章id
 * @param {*} index 要删除的文章列表索引
 */
const handleRemove = (id, index) => {
  ElMessageBox.confirm("是否删除该文章？", "Warning", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      let { status, msg } = await article.remove({ id });
      if (status) {
        list.value.splice(index, 1);
      }
      ElMessage({
        type: status ? "success" : "error",
        message: msg,
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消",
      });
    });
};

/**
 * @description: 点击进入浏览文章
 * @return {*}
 * @param {*} data 表格行内容
 */
const handleDetail = (data) => {
  console.log(data);
  router.push({ path: "/article/detail", query: { id: data.id } });
  // router.push({ path: "/article/detail", query: { id: data.id } });
};

/**
 * @description: 跳转编辑页面
 * @return {*}
 * @param {*} data
 */
const handleEdit = (data) => {
  router.push({ path: "/article/edit", query: { id: data.id } });
};
</script>

<style lang="less" scoped>
.avatar {
  vertical-align: middle;
  text-align: center;
}
</style>
